<template>
    <div>
        <base-user-info-component class="topInfo" :userId="datas.userId"></base-user-info-component>
        <card-content-component :content="datas.content" :img="datas.img"></card-content-component>
        <card-buttons-component @show="getShow"></card-buttons-component>
        <transition name="el-zoom-in-top">
            <div v-show="show" class="transition-box"><comment-region-component></comment-region-component></div>
        </transition>
    </div>
</template>

<script>
    import BaseUserInfoComponent from "@/components/BaseUserInfoComponent.vue";
    import CardContentComponent from "@/components/CardContentComponent.vue";
    import CardButtonsComponent from "@/components/CardButtonsComponent.vue";
    import CommentRegionComponent from "@/components/CommentRegionComponent.vue";
    export default {
        name: "CardComponent",
        components: {CommentRegionComponent, CardButtonsComponent, CardContentComponent, BaseUserInfoComponent},
        data() {
            return {
                show:false,
            }
        },
        methods:{
            getShow(param){
                this.show = param
            }
        },
        props:{
            datas:Object
        }
    }
</script>



<style scoped>

    .topInfo:after{
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .transition-box{
        margin-top: 10px;
    }
</style>